<template>
    <mescroll-uni  @up="upCallback" @down="downCallback"  :down="downOption"  :up="upOption"  class="mescroll-flex"  @init="mescrollInit">
    <view class="book-recommend-wrapper common-interval">
        <view class="book-item" v-for="item in recommondData" :key="item.itemsId" @click="watchBook(item)">
            <view class="book-img">
                <image :src="item.itemsHead"/>
            </view>
            <view class="book-info">{{item.itemsName}}</view>
        </view>
    </view>
    </mescroll-uni>
</template>

<script>
    import service from "@/service";
    import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
    export default {
        name: "bookRecommend",
        components: {
            MescrollUni
        },
        data() {
            return {
                recommondData: [],
                width: '',
                isMore: false,
                downOption: {
                    auto: false,
                },
                upOption:{
                    use: true, // 是否启用上拉加载; 默认true
                    auto: true,
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        icon: 'https://img.thumbrary.com/empty.png',
                        tip: '暂无数据'
                    },
                    textNoMore:'我是有底线的 >_<'
                },
                mescroll: null,
                page: 1,
                limit: 10
            }
        },
        methods: {
            mescrollInit(mescroll) {
                this.mescroll = mescroll;
            },
            upCallback(mescroll){
                this.page = mescroll.num;
                this.getBookList();
            },
            downCallback(mescroll){
                this.recommondData = [];
                this.page = 1;
                mescroll.resetUpScroll();
            },
            getBookList() {
                uni.showLoading({
                    title: '加载中',
                });
                service.homeService.getBookList({
                    data: {
                        page: this.page,
                        limit: this.limit
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            let data = res.result.data || [];
                            this.page > 1 ? this.recommondData.push(...data) : this.recommondData = data;
                            this.mescroll && this.mescroll.endBySize(data.length, res.result.num);
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {
                    },
                });
            },
            watchBook(item){
                uni.navigateTo({
                    url: `../bookDetail/index?id=${item.itemsId}`
                });
            }
        },
    }
</script>

<style scoped lang="scss">
    .book-recommend-wrapper{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-top: 20rpx;
        box-sizing: border-box;
        .book-item{
            width:335rpx;
            border-radius:4rpx;
            font-size:28rpx;
            font-weight:bold;
            color:rgba(51,51,51,1);
            .book-img{
                width: 100%;
                height: 251rpx;
                image{
                    width: 100%;
                    height: 100%;
                }
            }
            .book-info{
                height: 80rpx;
                margin-top: 10rpx;
            }
            margin-bottom: 20rpx;
        }
    }
</style>